<template>
  <div>
    <!-- 服务列表 -->
    <h2>酒店服务列表</h2>
    <ul>
      <li v-for="(service, index) in services" :key="index">
        {{ service.name }} - 价格: {{ service.price }} 元
        <button @click="deleteService(index)">删除</button>
      </li>
    </ul>

    <!-- 添加服务表单 -->
    <h2>添加新服务</h2>
    <form @submit.prevent="addService">
      <label for="serviceName">服务名称:</label>
      <input type="text" id="serviceName" v-model="newService.name" required>
      <label for="servicePrice">服务价格:</label>
      <input type="number" id="servicePrice" v-model="newService.price" required>
      <button type="submit">添加</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 初始化服务列表
const services = ref([
  { name: '早餐服务', price: 20 },
  { name: '洗衣服务', price: 30 },
  { name: '按摩服务', price: 100 }
]);

// 新服务对象
const newService = ref({
  name: '',
  price: 0
});

// 添加服务的方法
const addService = () => {
  if (newService.value.name && newService.value.price > 0) {
    services.value.push({ ...newService.value });
    newService.value.name = '';
    newService.value.price = 0;
  }
};

// 删除服务的方法
const deleteService = (index) => {
  services.value.splice(index, 1);
};
</script>

<style scoped>
/* 简单的样式 */
h2 {
  margin-top: 20px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

button {
  margin-left: 10px;
}

form label {
  display: block;
  margin-bottom: 5px;
}

form input {
  margin-bottom: 10px;
  width: 200px;
}
</style>